<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<textarea id="text" rows="5" cols="25" style="float:right;"></textarea>
<div id="div" style="height:64px;width:1000px;border:solid 2px red;padding:0;overflow:auto;margin: 100px;">
  <div id="info" style="height:32px;width:2400px;border:solid 1px blue;background-color: blanchedalmond">
    <span id="item1" style="width: 150px;display:inline-block;margin-right: 16px; background-color: brown">111</span>
    <span style="width: 150px;display:inline-block;margin-right: 16px; background-color: brown">222</span>
    <span style="width: 150px;display:inline-block;margin-right: 16px; background-color: brown">333</span>
    <span style="width: 150px;display:inline-block;margin-right: 16px; background-color: brown">444</span>
    <span style="width: 150px;display:inline-block;margin-right: 16px; background-color: brown">555</span>
    <span style="width: 150px;display:inline-block;margin-right: 16px; background-color: brown">666</span>
    <span style="width: 150px;display:inline-block;margin-right: 16px; background-color: brown">777</span>
    <span id="item" style="width: 150px;display:inline-block;margin-right: 16px; background-color: aquamarine">888</span>
    <span style="width: 150px;display:inline-block;margin-right: 16px; background-color: brown">999</span>
    <span style="width: 150px;display:inline-block;margin-right: 16px; background-color: brown">000</span>
    <span style="width: 150px;display:inline-block;margin-right: 16px; background-color: brown">aaa</span>
    <span style="width: 150px;display:inline-block;margin-right: 16px; background-color: brown">bbb</span>
    <span style="width: 150px;display:inline-block;margin-right: 16px; background-color: brown">ccc</span>
    <span style="width: 150px;display:inline-block;margin-right: 16px; background-color: brown">ddd</span>
  </div>
</div>
<script>
  var div = document.getElementById("div");
  div.scrollLeft = 200;  // 设置盒子左边滚出区域宽度为200像素
  // div.scrollTop = 200;  // 设置盒子顶部滚出区域高度为200像素
  var text = document.getElementById("text");
  div.onscroll = function () {  // 注册滚动事件处理函数
    text.value = "scrollLeft = " + div.scrollLeft + "\n" +
      "scrollTop = " + div.scrollTop + "\n" +
      "scrollWidth = " + div.scrollWidth + "\n" +
      "scrollHeight = " + div.scrollHeight;
  }
  var info = document.getElementById("info");
  var item = document.getElementById("item");
  var item1 = document.getElementById("item1");
</script>

</body>
</html>
